<html>
	<head>
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,700,300,600,400&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="css/layerslider.css">
		<link rel="stylesheet" type="text/css" href="css/datepicker.css">
		<link rel="stylesheet" type="text/css" href="css/config.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<section class="wrapper">
			<header>
				<div class="header-top">
					<div class="container">
						<ul class="top">
							<li><a href="javascript:void(0);">Sitemap</a></li>
							<li><a href="javascript:void(0);">Welcom back-<span>LOGIN</span></a></li>
							<li class="dropdown">Language: <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">VI
								<span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="javascript:void(0);">EN</a></li>
									<li><a class="active" href="javascript:void(0);">VI</a></li>
									<li><a href="javascript:void(0);">CH</a></li>
									<li><a href="javascript:void(0);">JA</a></li>
								</ul>
							</li>
						</ul>
						
					</div>
				</div>
				<div class="header">
					<div class="container">
						<div class="logo">
							<a href="index.html"><img src="images/logo.png"></a>
						</div>
						<div class="navigation">
							<ul>
								<li><a href="find-hotel.html" class="active">find a hotel</a></li>
								<li><a href="javascript:void(0);">spa</a></li>
								<li><a href="promotions.html">promotions</a></li>
								<li><a href="recruiment.html">recruiment</a></li>
							</ul>
						</div>
						<div class="slogon"><h1>We care, always!</h1></div>
					</div>
				</div>
			</header>
			<div class="content">
				<div class="maps" id="map_canvas"></div>
				<div class="container hotel-detail">
					<div class="photo">
						<img src="images/sakyo.jpg">
					</div>
					<div class="detail">
						<h3>Silverland Sakyo Hotel & Spa</h3>
						<ul>
							<li class="address">
								<span class="glyphicon glyphicon-map-marker"></span>
								<div class="des">
									10A-B-C Le Thanh Ton Street, Ben Nghe Ward, Dist 1,<br>Ho Chi Minh City, Vietnam
								</div>
							</li>
							<li class="tel">
								<span class="glyphicon glyphicon-earphone"></span>
								<div class="des">Tel: +84 8 38 295 295</div>
							</li>
							<li class="tel">
								<span class="glyphicon glyphicon-earphone"></span>
								<div class="des">Fax: +84 8 3 275 089</div>
							</li>
							<li class="email">
								<span class="glyphicon glyphicon-envelope"></span>
								<div class="des">Email: info@silverlandsakyohotel.com</div>
							</li>
						</ul>
						<div class="btn-view-hotel">
							<a href="hotel-detail.html">View hotel site</a>
						</div>
					</div>
					<div class="prices">
						<span>From</span>
						<h3>$80</h3>
						<p>per night (USD)</p>
						<div class="btn-book-room">
							<input type="submit" value="Book a room">
						</div>
					</div>
				</div>
			</div>
			<footer class="footer">
				<div class="container">
					<div class="footer-logo">
							<a href="javascript:void(0);"><img src="images/footer-logo.png"></a>
					</div>
					<div class="footer-right">
						<div class="payment"><img src="images/payment.png"></div>
						<div class="news-daily">
							<div class="button-send">
								<input type="button" class="btnSend" value="Send">
								<span class=" glyphicon glyphicon-envelope"></span>
							</div>
							<input type="text" class="daily-email" placeholder="Enter your email to get promotions from us">
						</div>
						<div class="copyright">
							COPYRIGHT © 2013 Tan Hai Long - Silverland Hotel Group. ALL RIGHTS RESERVED.
						</div>
					</div>
				</div>
			</footer>
		</section>
		<div class="home">
			<a href="index.html"><span class="glyphicon glyphicon-home"></span></a>
		</div>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery-easing-1.3.js"></script>
		<script type="text/javascript" src="js/layerslider.transitions.js"></script>
		<script type="text/javascript" src="js/jquery-transit-modified.js"></script>
		<script type="text/javascript" src="js/layerslider.kreaturamedia.jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script type='text/javascript'>			
			var moved = false; 
			function initialize() {
				var data = [
							['10.773891','106.69706', '1', "1"], //grand
							['10.78162','106.70559', '1', "2"], //sakyo
							['10.779921','106.70381', '1', '3'], //tvl
							['10.771659','106.697678', '1', '4'], //central
							['10.777291','106.705496', '1', '5'], //la jolie
							['10.776919','106.704508', '1', '6'], // inn
							['10.771781','106.703714', '1', '7']
						];
				//this uses the range of the points as the bounds
				var myLatlngBounds = new google.maps.LatLngBounds(
						new google.maps.LatLng(10.771659, 106.69706)
						, new google.maps.LatLng(10.78162, 106.70559)
					);
				//0=normal, 1=featured
				
					var dots = ["images/icon-map.png","images/icon-map.png"]
				
				var myOptions = {
			      //zoom: 14,
			      scaleControl: true,
			      center: myLatlng,
			      maxZoom: 16,
			      mapTypeId: google.maps.MapTypeId.ROADMAP
			    }
			    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			    map.fitBounds(myLatlngBounds);
			    
			    for(var i=0;i<data.length;i++){
			        var row = data[i];
			        var image = dots[row[2]];
			        var myLatlng = new google.maps.LatLng(row[0],row[1]);
			        var marker = new google.maps.Marker({
			            position: myLatlng, 
			            map: map,
			            /*animation: google.maps.Animation.DROP,*/
			            icon: image,
			            title: "",
			            html: row[3]
			        });   

			        google.maps.event.addListener(marker, 'click', function() {
			        	var clone = $("#"+this.html).clone();			        	
			    			this.setIcon("http://6a66e047f3e460001b08-9c8de170feb0883ba5649f745b33cd82.r86.cf2.rackcdn.com/ico_selected@2x.png");
			    			var image = $(clone).find(".markerIcon");
			    			$(image).attr("src","http://6a66e047f3e460001b08-9c8de170feb0883ba5649f745b33cd82.r86.cf2.rackcdn.com/ico_selected@2x.png");
			    			if(!moved){
			    				$("html, body").animate({"scrollTop":"340px"}, 750);
			    				moved = true;
			    			}
							
			        	$(clone).addClass("clone").hide();
			        	$("#"+this.html).remove();
			            $("#yssEvents .right .theMap .cloneList").prepend(clone);
			            $(clone).slideDown();
			        });
			    }
			    	    
			}//initialize()

			$(document).ready(function(){
				//var children = $("#yssEvents .eventList").children(".moveToBottom");
				
				// if(children.length > 0) $(".mobileListing").show().html("There are " + children.length + " mobile listings shown only on the map.");
				
				// for(var i = 0; i < children.length; i++){
				// 	var clone = $(children[i]).clone();
				// 	$(children[i]).remove();
				// 	$("#yssEvents .eventList").append(clone);
				// }
				
				// children = $("#yssEvents .event .eventdesc")
				// for(var i = 0; i < children.length; i++){
				// 	if($(children[i])[0].scrollHeight > 114){
				// 		$(children[i]).append("<span class='readMore' onclick=\"bookoo.yardSaleSearch.toggleMore(this)\">. . . More &raquo;</span>");
				// 	}
				// }
			});

			setTimeout("initialize()",10);
			</script>
	</body>
</html>